import React,{Component} from 'react'
import Child from '../Child'

export default class index extends Component {

  state = {
    name:'JIMMY',
    errMsg:''
  }

  /*
    这个就是 处理错误边界 尤其是在生产环境
      一个组件如果因为后端返回的数据格式不对了 一个小小的组件就会造成整个系统崩溃

      所以这样操作错误边界就是让报错的组件不渲染 最好再给一个提示 同时反馈后台等等一系列的操作 
      在真实的开发过程中还是非常经常会用到的
  */ 

  static getDerivedStateFromError(err){
    // 这个钩子只要是后代出错了就会触发  执行的时机是在render 之前
    // 而且会返回具体的错误信息

    // 这个方法的返回值就是相当于 setState

    console.log(err)
    return {
      errMsg:err
    }
  }

  componentDidCatch(){
    // 这个钩子是用于 捕获后代组件生命周期渲染出错了的  只要出错了就会走到这个生命周期里面
    // 这个可以用于向服务器发送错误信息，统计错误
    console.log('后代组件生命周期渲染过程中出错了@！@')
  }

  render() {
    console.log('父组件 -- render')
    return (
      <div>
        <h2>我是父组件</h2>
        {/* 
          注意： 这个操作只有在生产环境下才有用
            开发环境下只会有用一秒 然后又马上出现报错信息
        */}
        {this.state.errMsg?'网络繁忙，请稍后重试':<Child />}
        
      </div>
    )
  }
}

